94:I[903690,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/38ug3n50sd79m.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/2wi4f19gpmjmu.js","/chat-static/_next/static/immutable/chunks/3f0qksrmwbx5_.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2i-ulz8g4wtdk.js"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/38ug3n50sd79m.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/2wi4f19gpmjmu.js","/chat-static/_next/static/immutable/chunks/3f0qksrmwbx5_.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2i-ulz8g4wtdk.js"],"SWRDataProvider"] 96:T53ae,[V0_FILE]typescriptreact:file="components/kokonutui/minimal-shop.tsx" "use client" import { AnimatePresence } from "motion/react" import { useState } from "react" import { ProductGrid } from "./product-grid" import { CartDrawer } from "./cart-drawer" import { ProductModal } from "./product-modal" import { TopBar } from "./top-bar" import { type Product, type CartItem, products } from "./data" export default function MinimalShop() { const [cart, setCart] = useState([]) const [selectedProduct, setSelectedProduct] = useState(null) const [isCartOpen, setIsCartOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const addToCart = (product: Product, quantity = 1) => { setCart((prev) => { const exists = prev.find((item) => item.id === product.id) if (exists) { return prev.map((item) => (item.id === product.id ? { ...item, quantity: item.quantity + quantity } : item)) } return [...prev, { ...product, quantity }] }) } const removeFromCart = (productId: string) => { setCart((prev) => prev.filter((item) => item.id !== productId)) } const filteredProducts = products.filter((product) => product.name.toLowerCase().includes(searchQuery.toLowerCase())) return (

setIsCartOpen(true)} onSearch={setSearchQuery} />

{selectedProduct && ( setSelectedProduct(null)} onAddToCart={(product) => { addToCart(product) setSelectedProduct(null) setIsCartOpen(true) }} /> )} {isCartOpen && ( setIsCartOpen(false)} onRemoveFromCart={removeFromCart} /> )}

) } [V0_FILE]typescriptreact:file="components/kokonutui/product-grid.tsx" import { motion } from "motion/react" import type { Product } from "./data" interface ProductGridProps { products: Product[] onProductSelect: (product: Product) => void } export function ProductGrid({ products, onProductSelect }: ProductGridProps) { return (

{products.map((product) => ( onProductSelect(product)} className="group cursor-pointer" whileHover={{ y: -1 }} transition={{ duration: 0.2 }} >

{product.name}

${product.price}

{product.category}

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/product-modal.tsx" "use client" import { motion } from "motion/react" import { X } from "lucide-react" import { useState } from "react" import type { Product } from "./data" interface ProductModalProps { product: Product onClose: () => void onAddToCart: (product: Product) => void } export function ProductModal({ product, onClose, onAddToCart }: ProductModalProps) { const [quantity, setQuantity] = useState(1) return ( <>

{product.name}

{product.category}

${product.price}

{product.description}

SKU: {product.id}

Stock: Available

) } [V0_FILE]typescriptreact:file="components/kokonutui/cart-drawer.tsx" import { motion } from "motion/react" import { X } from "lucide-react" import type { CartItem } from "./data" interface CartDrawerProps { cart: CartItem[] onClose: () => void onRemoveFromCart: (productId: string) => void } export function CartDrawer({ cart, onClose, onRemoveFromCart }: CartDrawerProps) { const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0) return ( <>

Shopping Cart

{cart.map((item) => (

{item.name}

Qty: {item.quantity}

${item.price * item.quantity}

))}

Total ${total}

) } [V0_FILE]typescriptreact:file="components/kokonutui/data.ts" export interface Product { id: string name: string description: string price: number image: string category: string } export interface CartItem extends Product { quantity: number } export const products: Product[] = [ { id: "p1", name: "Minimal Desk Lamp", description: "A sleek and modern desk lamp with adjustable brightness and color temperature.", price: 89, image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Lighting", }, { id: "p2", name: "Ceramic Coffee Set", description: "Handcrafted ceramic coffee set including 4 cups and a matching pour-over dripper.", price: 65, image: "https://images.unsplash.com/photo-1517256064527-09c73fc73e38?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Kitchenware", }, { id: "p3", name: "Linen Throw Pillow", description: "Soft linen throw pillow with minimalist pattern design.", price: 45, image: "https://images.unsplash.com/photo-1579656381226-5fc0f0100c3b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, { id: "p4", name: "Wooden Wall Clock", description: "Modern wooden wall clock with silent movement.", price: 79, image: "https://images.unsplash.com/photo-1563861826100-9cb868fdbe1c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, { id: "p5", name: "Concrete Planter", description: "Minimalist concrete planter perfect for succulents.", price: 34, image: "https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Plants", }, { id: "p6", name: "Glass Vase Set", description: "Set of 3 minimalist glass vases in varying sizes.", price: 55, image: "https://images.unsplash.com/photo-1581783898377-1c85bf937427?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, { id: "p7", name: "Bamboo Organizer", description: "Desk organizer made from sustainable bamboo.", price: 42, image: "https://images.unsplash.com/photo-1591129841117-3adfd313e34f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Office", }, { id: "p9", name: "Marble Coasters", description: "Set of 4 marble coasters with cork backing.", price: 38, image: "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Kitchenware", }, { id: "p10", name: "Brass Bookends", description: "Modern geometric brass bookends, set of 2.", price: 68, image: "https://images.unsplash.com/photo-1544457070-4cd773b4d71e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Office", }, { id: "p11", name: "Ceramic Plant Pot", description: "Handmade ceramic plant pot with drainage hole.", price: 48, image: "https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Plants", }, { id: "p12", name: "Wall Mirror", description: "Round wall mirror with minimal metal frame.", price: 120, image: "https://images.unsplash.com/photo-1618220179428-22790b461013?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", category: "Home Decor", }, ] [V0_FILE]typescriptreact:file="components/kokonutui/header.tsx" import { Search, ShoppingBag } from "lucide-react" import { Menu } from "lucide-react" interface HeaderProps { cartCount: number onCartOpen: () => void searchQuery: string onSearchChange: (query: string) => void } export function Header({ cartCount, onCartOpen, searchQuery, onSearchChange }: HeaderProps) { return (

Store

onSearchChange(e.target.value)} placeholder="Search products..." className="w-full h-9 pl-9 pr-4 text-sm bg-zinc-100 dark:bg-zinc-900 rounded-full focus:outline-none focus:ring-2 focus:ring-zinc-300 dark:focus:ring-zinc-700" />

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import MinimalShop from "@/components/kokonutui/minimal-shop" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Minimal Shop", description: "A minimalist e-commerce experience", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer utilities { .text-balance { text-wrap: balance; } } [V0_FILE]typescriptreact:file="components/kokonutui/top-bar.tsx" isFixed="true" isQuickEdit="true" "use client" import { Search, ShoppingBag, X } from "lucide-react" import { useState, useEffect, useRef } from "react" import { motion } from "motion/react" import Link from "next/link"; interface TopBarProps { cartItemCount: number onCartClick: () => void onSearch: (query: string) => void } const categories = ["All", "Lighting", "Kitchenware", "Home Decor", "Plants", "Office", "Textiles"] export function TopBar({ cartItemCount, onCartClick, onSearch }: TopBarProps) { const [isSearchOpen, setIsSearchOpen] = useState(false) const [selectedCategory, setSelectedCategory] = useState("All") const [isScrolled, setIsScrolled] = useState(false) const searchInputRef = useRef(null) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Escape") { setIsSearchOpen(false) searchInputRef.current?.blur() } } return (

Shop

{categories.map((category) => ( ))}

onSearch(e.target.value)} onKeyDown={handleKeyPress} /> {isSearchOpen && ( )}

) } 8a:["$","$L94",null,{"chatId":"czGJD09bhoQ","children":["$","$L95",null,{"data":{"@\"active-block\",\"czGJD09bhoQ\",":{"id":"hU4S5HI90lD","messageId":"rUizkEMvzGg9t9UmcSXndtjBAwTbgK6U","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"minimal-shop","type":"code-project","project":"minimal-shop"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"czGJD09bhoQ\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This